package com.example.day0221.demon

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp

//流式布局
@OptIn(ExperimentalLayoutApi::class)
@Composable
fun Demon04() {

    val list= listOf("咖啡","java基础","咖啡","在 Jetpack Compose 中水平居中是那个属性","在 Jetpack Compose 中让两行文字垂直排列怎样实现","水","饮料","糖果")

    FlowRow (
        modifier = Modifier.padding(10.dp)
            .background(color = Color.Yellow),
        horizontalArrangement = Arrangement.spacedBy(10.dp),
        verticalArrangement = Arrangement.spacedBy(10.dp),
    ){
        list.forEach {
            FlowItem(text = it)
        }
    }

}
@Composable
fun FlowItem(text: String) {
    Text(
        text = text,
        modifier = Modifier
            .background(Color.Green, RoundedCornerShape(20.dp))
            .border(1.dp, Color.Gray, RoundedCornerShape(20.dp))
            .padding(horizontal = 10.dp, vertical = 5.dp),
        maxLines = 1,
        overflow = TextOverflow.Ellipsis
    )
}